<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/buy.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="./js/ajax.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/cookie.js"></script>
  </head>
  <body>
    <div class="header">
      <div class="head1">
        <img src="./images/header1.png" alt="" />
      </div>
      <div class="head2">
        <img src="./images/ico-comm5.png" alt="" />
      </div>
      <div class="head3">
        <input type="text" class="search" placeholder="请输入想要找的宝贝" />
      </div>
      <div class="head4"><a href="denglu.html">立即登录</a></div>
      <div class="head5"><a href="">购物车</a></div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="head.html">首页</a></li>
        <li><a href="page.html">枪模主题站</a></li>
        <li><a href="page.html">服饰时尚</a></li>
        <li><a href="page.html">包类专区</a></li>
        <li><a href="page.html">数码外设</a></li>
        <li><a href="page.html">家居日用</a></li>
        <li><a href="page.html">模型手办</a></li>
      </ul>
    </div>
    <!-- 中间部分 -->
    <div class="content">   
        <table id="cartTable">
        <thead>
          <tr>
            <th>
              <label
                ><input
                  class="check-all check"
                  type="checkbox"
                />&nbsp;全选</label
              >
            </th>
            <th>商品信息</th>
            <th>商品单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
         <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/images/20150708112148lm2t0.jpg" alt="" /><span
                >飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯
                防漏带手柄（2件装）</span
              >
            </td>
            <td class="price">220.88</td>
            <td class="count">
              <span class="reduce"></span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">220.88</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr> 
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/images/201509091748430829.jpg" alt="" /><span
                >日本Merries花王新生儿纸尿裤S82</span
              >
            </td>
            <td class="price">388.50</td>
            <td class="count">
              <span class="reduce"></span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">388.50</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
          <tr>
             <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/images/3.jpg" alt="" /><span
                >Sony/索尼 DSC-WX300</span
              >
            </td>
            <td class="price">1428.50</td>
            <td class="count">
              <span class="reduce"></span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">1428.50</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr>
          <tr>
            <td class="checkbox">
              <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="img/images/201608081427026196.jpg" alt="" /><span
                >韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装
                多款颜色图案随机发货
              </span>
            </td>
            <td class="price">640.60</td>
            <td class="count">
              <span class="reduce"></span
              ><input class="count-input" type="text" value="1" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">640.60</td>
            <td class="operation"><span class="delete">删除</span></td>
          </tr> -->
        </tbody>
      </table>
      <div class="foot" id="foot">
        <label class="fl select-all"
          ><input type="checkbox" class="check-all check" />&nbsp;全选</label
        >
        <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>

        <div class="fr closing">立即购买</div>
        <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">
          已选商品<span id="selectedTotal">0</span>件<span class="arrow up"
            >︽</span
          ><span class="arrow down">︾</span>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="footer1">
        <a href=""><img src="./images/20.png" alt="" /></a
        ><a href=""><img src="./images/21.png" alt="" /></a>
      </div>
      <ul class="footer2">
        <li><a href="">购物指南</a></li>
        <li><a href="">配送方式</a></li>
        <li><a href="">常见操作</a></li>
        <li><a href="">售后服务</a></li>
        <li><a href="">关于我们</a></li>
      </ul>
      <div class="footer3">
        <span><img src="./images/22.png" alt="" /></span>
        <span><img src="./images/23.png" alt="" /></span>
      </div>
    </div>
    <div class="footer-end">
      <div class="footer-end1"><img src="./images/24.png" alt="" /></div>
    </div>
    <script>
      let isHaveUid = getCookie("uid");
      getCartList();
// 通过ajax来获取数据
function getCartList() {
  ajax({
    url: "./getCartList.php",
    data: {
      uid:isHaveUid
    },
    dataType: "json",
  }).then((res) => {
    console.log(res);
    renderDom(res);
    addEvent();
    minuNum();
    del();
  });
}
      function renderDom(data) {
          let tbodyEle=document.querySelector("tbody");
          tbodyEle.innerHTML="";
          data.forEach(item=> {
              let trEle=document.createElement("tr")
            //   tdEle.className="checkbox"
              trEle.innerHTML=`  <input class="check-one check" type="checkbox" />
            </td>
            <td class="goods">
              <img src="${item.images}" alt="" /><span
                >${item.name}</span
              >
            </td>
            <td class="price">${(
                              (item.price * 100) /
                              100
                            ).toFixed(2)}</td>
            <td class="count">${
                              item.num <= 1
                                ? '<span class="reduce"></span>'
                                : '<span class="reduce">-</span>'
                            }
             <input class="count-input" type="text" myid="${item.id}" value="${
                                      item.num
                                    }" /><span
                class="add"
                >+</span
              >
            </td>
            <td class="subtotal">${(
                              (item.num * (item.price * 100)) /
                              100
                            ).toFixed(2)}</td>
            <td class="operation"><span class="delete" myid="${
                              item.id
                            }">删除</span></td>
          </tr>` 
          tbodyEle.appendChild(trEle)
          }); }
          function addEvent() {
  //点击添加
  var addEles = document.querySelectorAll(".add");
  // console.log(addEles)
  addEles.forEach((item) => {
    item.onclick = function () {
      
      var val = parseInt(this.previousElementSibling.value) ;
      val += 1
    // console.log(val)
      var id = this.previousElementSibling.getAttribute("myid");
      // console.log(id)
      
      ajax({
        url: "./addNum.php",
        method: "post",
        data: {
          id,
          val,
        },
        dataType: "json",
      }).then((res) => {
        console.log(res)
        getCartList();
      });
      
    };
  });
  
}

//点击减少
function minuNum() {
  var minusEles = document.querySelectorAll(".reduce");
  minusEles.forEach((item) => {
    item.onclick = function () {
      var id = this.nextElementSibling.getAttribute("myid");
      var val = this.nextElementSibling.value;
      if (val > 1) {
        val = val - 1;
        ajax({
          url: "./reduceNum.php",
          method: "post",
          data: {
            id,
            val,
          },
          dataType: "json",
        }).then((res) => {
          // console.log(res)
          getCartList();
        });
      }
    };
  });
}
//点击删除
function del() {
  var deleteEles = document.querySelectorAll(".delete");
  deleteEles.forEach((item) => {
    item.onclick = function () {
      var id = this.getAttribute("myid");
      console.log(id);
      ajax({
        url: "./del.php",
        method: "post",
        data: {
          id,
        },
        dataType: "json",
      }).then((res) => {
        console.log(res);
        getCartList();
      });
    };
  });
}

// 结算
var priceTotalEle=document.querySelector("#priceTotal")
var subtotalEle=document.querySelector(".subtotal")
var res=0
subtotalEle.forEach((item)=>{
res+=item.innerHTML})
priceTotalEle.innerHTML=res


    </script>
  </body>
</html>
